.icon-container {
    display: flex;
    justify-content: space-between;
    min-width: 46px;
    align-items: center;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.network-bad {
    cursor: pointer;
    display: flex;
    width: 16px;
    height: 16px;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/signal-bad@2x.png');
    }
}

.network-good {
    cursor: pointer;
    display: flex;
    width: 16px;
    height: 16px;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/signal-good@2x.png');
    }
}

.network-normal {
    cursor: pointer;
    display: flex;
    width: 16px;
    height: 16px;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/signal-normal@2x.png');
    }
}

.icon {
    cursor: pointer;
    display: flex;
    width: 16px;
    height: 16px;
}

.icon:hover {
    &::after {
        display: block;
        content: ' ';
        background-color: rgba($color: #000000, $alpha: 0.07);
        border-radius: 4px;
    }
}

.icon-voice,
.icon-speaker,
.icon-speaker-on,
.icon-speaker-off,
.icons-camera-mute-s,
.icons-camera-unmute-s {
    display: flex;
    width: 24px !important;
    height: 24px !important;
    margin-right: 0px !important;
}

.icon-voice::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-microphone@2x.png');
}

.icon-speaker::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-speaker@2x.png');
}

.icon-speaker-on,
.icon-speaker-off {
    width: 37px;
}

.icon-speaker-on::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-speaker-on.png');
}

.icon-speaker-off::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-speaker-off.png');
}

.icons-camera-mute::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url("./assets/icon-camera-off@2x.png");
}

.icons-camera-unmute::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url("./assets/icon-camera-on@2x.png");
}

.icons-camera-mute-s::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url("./assets/icon-cameraoff-s@2x.png");
}

.icons-camera-unmute-s::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url("./assets/icon-cameraon-s@2x.png");
}

.icon-warning::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-caution@2x.png');
}

.icon-setting,
.icon-exit,
.icon-upload,
.icon-loading {
    display: flex;
    max-width: 28px;
    max-height: 28px;
    min-width: 28px;
    min-height: 28px;
    &.nav {
        min-width: 18px;
        min-height: 18px;
    }
}

.icon-setting::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-setting@2x.png');
}

.icon-upload::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-upload-log@2x.png');
}

.icon-loading::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    animation: rotate 1.3s infinite linear;
    -webkit-animation: rotate 1.3s infinite linear;
    background-image: url('./assets/icon-loading.png');
}

.icon-exit::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-exit@2x.png');
}

.icon-prev_page::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-prev@2x.png');
}

.icon-time {
    display: flex;
    width: 20px;
    height: 20px;
}

.icon-time::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-time@2x.png');
}

.menu-split {
    min-height: 14px;
    width: 2px;
    background: #DBE2E5;
    border: 1px solid #DBE2E5;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 16px;
}

.icon-btn {
    display: flex;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

.icon-btn:focus-within {
    // content: ' ';
    background-color: rgba($color: #000000, $alpha: 0.12);
    border-radius: 16px;
}

.icon-btn:hover {
    &::after {
        content: ' ';
        background-color: rgba($color: #000000, $alpha: 0.07);
        border-radius: 16px;
    }
}

.icon-minimum::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-min@2x.png');
}

.icon-maximum::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-max@2x.png');
}

.icon-maximum2::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/restore.png');
}

.icon-maximum3::after {
    width: 37px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/restore.png');
}

.icon-delete::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-delete@2x.png');
}

.icon-close::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-close-gray@2x.png');
}

.media-board.panel {
    pointer-events: none;
    cursor: pointer;
}

.media-board {
    cursor: 'pointer';
    .clear::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        // background-image: url('./assets/Rectangle-6-Copy-7@2x.png');
        background-image: url('./assets/clear.png');
        // background-size: 16px 17px
    }
    .color_picker::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        // background-image: url('./assets/Rectangle-6-Copy-8@2x.png');
        background-image: url('./assets/colors.png');
        background-size: 16px 17px
    }
    .folder::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/whiteboard_file.png');
    }
    .add::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/Rectangle-6-Copy-9@2x.png');
    }
    .upload::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        //background-image: url('./assets/icon-upload-file@2x.png');
        background-image: url('./assets/icon-share-white.png');
        height: 28px;
        width: 28px;
    }
    .hand_tool::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        content: ' ';
        background-size: 20px;
        background-image: url('./assets/icon-move.png');
    }
    .lock_board::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        content: ' ';
        background-size: 20px;
        background-image: url('./assets/icon-lock-board.png');
    }
    .winsize::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/restore.png');
        background-size: 24px 24px
    }
}

.media-board {
    .first_page::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-first@2x.png');
    }
    .prev_page::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-prev@2x.png');
    }
    .next_page::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-next@2x.png');
    }
    .last_page::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-end@2x.png');
    }
    .recording::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-record@2x.png');
    }
    .stop_recording::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-stop@2x.png');
    }
    .screen_sharing::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-share@2x.png');
    }
}

.icon-expand {
    cursor: pointer;
    display: flex;
    width: 30px;
    height: 30px;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-sidebar-deafult@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-sidebar-hover@2x.png');
        }
    }
}

.icon-chat-on {
    cursor: pointer;
    display: flex;
    width: 34px;
    height: 34px;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-message-on@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-message-on@2x.png');
        }
    }
}

.icon-chat-off {
    cursor: pointer;
    display: flex;
    width: 34px;
    height: 34px;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-message-off@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-message-off@2x.png');
        }
    }
}

.icon-chat-on2 {
    cursor: pointer;
    display: flex;
    width: 30px !important;
    height: 30px !important;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-message-on@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-message-on@2x.png');
        }
    }
}

.icon-chat-off2 {
    cursor: pointer;
    display: flex;
    width: 30px !important;
    height: 30px !important;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-message-off@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-message-off@2x.png');
        }
    }
}

.icon-cam-off2 {
    cursor: pointer;
    display: flex;
    width: 30px !important;
    height: 30px !important;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-camera-on@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-camera-on@2x.png');
        }
    }
}

.icon-cam-off3 {
    cursor: pointer;
    display: flex;
    width: 30px !important;
    height: 30px !important;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-camera-off@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-camera-off@2x.png');
        }
    }
}

.icon-collapse-off {
    cursor: pointer;
    display: flex;
    width: 30px;
    height: 30px;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-sidebar-off-deafult@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-sidebar-off-hover@2x.png');
        }
    }
}

.icon-collapse-on {
    cursor: pointer;
    display: flex;
    width: 30px;
    height: 30px;
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-sidebar-deafult@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-sidebar-hover@2x.png');
        }
    }
}

.icon-connect-on {
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-connect@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-connect@2x.png');
        }
    }
}

.icon-connect-off {
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-disconnect@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-disconnect@2x.png');
        }
    }
}

.icon-audio-on {
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-microphone-on-blue@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-microphone-on-blue@2x.png');
        }
    }
}

.icon-audio-off {
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-microphone-off-blue@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-microphone-off-blue@2x.png');
        }
    }
}

.icon-video-on {
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-camera-on-blue@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-camera-on-blue@2x.png');
        }
    }
}

.icon-video-off {
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-camera-off-blue@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-camera-off-blue@2x.png');
        }
    }
}

.icon-left {
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-left@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-left@2x.png');
        }
    }
}

.icon-right {
    &::after {
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: ' ';
        background-image: url('./assets/icon-right@2x.png');
    }
    &:hover {
        &::after {
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-right@2x.png');
        }
    }
}

.media-board {
    .control-btn {
        cursor: pointer;
        background: #44A2FC;
        font-size: 14px;
        color: #ffffff;
        border-radius: 4px;
        align-items: center;
        display: flex;
        padding: 2px;
        &:hover {
            background: #7CBFFF;
        }
        .active {
            background: #2780D5;
        }
        .btn-icon {
            width: 28px;
            height: 28px;
        }
        // .icon-btn.control-quit_screen_sharing:hover {
        //   &::after {
        //     content: ' ';
        //     background-color: rgba($color: #000000, $alpha: 0.07);
        //     border-radius: 16px;
        //   }
        // }
        .quit_screen_sharing::after {
            width: 100%;
            height: 100%;
            display: block;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: ' ';
            background-image: url('./assets/icon-share-white.png');
        }
        .control-text {
            margin-right: 4px;
        }
    }
}

.icon-error {
    background-image: url('./assets/icon-caution@2x.png');
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: cover;
}

.icon-ok {
    background-image: url('./assets/icon-success@2x.png');
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: cover;
}

.icon-operates {
    margin: 0px 5px;
    &.startq {
        background-image: url('./assets/startq.png');
    }
    &.startq-off {
        background-image: url('./assets/startqoff.png');
    }
    &.stat {
        background-image: url('./assets/stat.png');
        width: 39px;
        height: 39px;
    }
    &.stat-on {
        background-image: url('./assets/staton.png');
        width: 39px;
        height: 39px;
    }
    &.resend {
        background-image: url('./assets/resend.png');
        width: 39px;
        height: 39px;
    }
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: contain;
}

.flex-1 {
    flex: 1;
}

.cursor_pointer {
    cursor: pointer;
}

li {
    list-style-type: none;
}

.icon-close2 {
    z-index: 10001;
    width: 18px;
    height: 18px;
    right: 10px;
    top: 10px;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-close-gray@2x.png');
}

.icon-minimum2 {
    z-index: 10001;
    width: 18px;
    height: 18px;
    right: 36px;
    top: 10px;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-min@2x.png');
}

//
.icon-close3 {
    width: 35px;
    height: 35px;
    right: 10px;
    top: 7px;
    z-index: 10001;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icons/icon-del-app.png');
}

.icon-minimum3 {
    width: 18px;
    height: 18px;
    right: 96px;
    top: 15px;
    z-index: 10001;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icons/icon-narrow-app.png');
}

.icon-maximum4 {
    width: 18px;
    height: 18px;
    right: 56px;
    top: 15px;
    z-index: 10001;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icons/icon-max-app.png');
}

.icon-upload2 {
    width: 36px !important;
    height: 36px !important;
    margin-right: 0px !important;
    // right: 10px;
    // top: 40px;
    // position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('./assets/icon-upload-log@2x.png');
}

.MuiSvgIcon-root.icon-refresh {
    width: 36px;
    height: 36px;
    // right: 10px;
    // top: 90px;
    margin-left: 30px;
    top: 10px;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    color: #294385;
    content: ' ';
    cursor: pointer;
}